<template>
	<view class="factory_main">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<view class="top-menu-view">
			<view
				class="menu-topic-view"
				v-for="(item, index) in tabsList"
				:key="index"
				@click="swichMenu(index)"
			>
				<view :class="currentTab == index ? 'menu-topic-act' : 'menu-topic'">
					<view class="menu-topic-text">
						<span>{{ item.name }}</span>
					</view>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="body-view">
			<scroll-view
				:refresher-triggered="triggered"
				refresher-background="transparent"
				@refresherrefresh="onRefresh"
				@refresherpulling="refresherpulling"
				refresher-enabled="true"
				scroll-y="true"
				class="scroll-view_list"
				@scrolltolower="scrolltolower"
				v-if="currentTab == 0"
			>
				<view class="factory_main_bgBox" v-if="detailObj">
					<view class="item_detail">
						<view class="item_detail_tableHead_box">
							<view
								v-if="!detailObj.enableNetwork"
								class="item_detail_tableHead"
							>
								<view class="item_detail_tableHead_tip">总部</view>
								<view>广东长青电器有限公司</view>
							</view>
							<!-- 占位 -->
							<view v-else></view>
							<span
								class="status"
								:class="
									detailObj.status == 1 ||
									detailObj.status == 2 ||
									detailObj.status == 3 ||
									detailObj.status == 6
										? 'status_123'
										: detailObj.status == 4 || detailObj.status == 5
										? 'status_4'
										: detailObj.status == 8
										? 'status_6'
										: ''
								"
							>
								{{
									detailObj.status == 1
										? '待总部审核'
										: detailObj.status == 2
										? '待填写物流信息'
										: detailObj.status == 3
										? '待总部签收'
										: detailObj.status == 4
										? '处理中'
										: detailObj.status === 5
										? '待总部寄出'
										: detailObj.status == 6
										? '待网点签收'
										: detailObj.status == 7
										? '网点已签收'
										: detailObj.status == 8
										? '已取消'
										: ''
								}}
							</span>
						</view>
						<view class="item_detail_tableHead_content">
							<view class="item_detail_tableHead_content_info">
								<uni-icons color="#777" type="location-filled"></uni-icons>
								<template v-if="detailObj.enableNetwork">
									{{
										[
											detailObj.customerReceiveProvince,
											detailObj.customerReceiveCity,
											detailObj.customerReceiveArea,
											detailObj.customerReceiveAddress,
										]
											.filter((o) => o)
											.join('')
									}}
								</template>
								<template v-else>
									{{
										[
											detailObj.networkProvince,
											detailObj.networkCity,
											detailObj.networkArea,
											detailObj.networkAddress,
										]
											.filter((o) => o)
											.join('')
									}}
								</template>
							</view>
							<view class="item_detail_tableHead_content_info">
								<uni-icons color="#777" type="person-filled"></uni-icons>
								<template v-if="detailObj.enableNetwork">
									{{ detailObj.customerReceiveUsername }}
									{{ detailObj.customerReceivePhone }}
								</template>
								<template v-else>
									{{ detailObj.networkManagerName }}
									{{ detailObj.networkManagerPhone }}
								</template>
							</view>
						</view>
						<view style="border-top: 1px solid #eee; margin: 12rpx 0"></view>
						<view class="list-item">
							<view class="edit_order_check">
								<uni-section
									titleColor="#000"
									title="返厂信息"
									titleFontSize="28rpx"
									type="line"
								></uni-section>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">服务方式：</view>
								<view class="cont" style="font-weight: bold">
									{{ detailObj.repairModule }}
								</view>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">返厂单号：</view>
								<view class="cont" style="font-weight: bold">
									{{ detailObj.repairNo }}
								</view>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">申请时间：</view>
								<view class="cont">
									{{ detailObj.createTime }}
								</view>
							</view>
							<view class="divider"></view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">网点名称：</view>
								<view class="cont">
									{{ detailObj.username }}
								</view>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">联系人员：</view>
								<view class="cont">
									{{ detailObj.contacts }}
								</view>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">联系电话：</view>
								<view class="cont">
									{{ detailObj.contactsPhone }}
								</view>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">网点地址：</view>
								<view class="cont">
									{{
										[
											detailObj.contactsProvince,
											detailObj.contactsCity,
											detailObj.contactsArea,
											detailObj.contactsAddress,
										]
											.filter((o) => o)
											.join('')
									}}
								</view>
							</view>
							<template
								v-if="
									detailObj.sendBackLogisticsName &&
									detailObj.sendBackLogisticsNo
								"
							>
								<view class="list-item_lable">
									<view class="list-item_lable_title">返厂物流：</view>
									<view class="cont">
										{{ detailObj.sendBackLogisticsName }}
									</view>
								</view>
								<view class="list-item_lable">
									<view class="list-item_lable_title">物流单号：</view>
									<view class="cont">
										{{ detailObj.sendBackLogisticsNo }}
									</view>
								</view>
							</template>
							<view class="divider"></view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">收件方式：</view>
								<view class="cont">
									{{
										detailObj.customerTakePieceMode == 1
											? '网点自取'
											: detailObj.customerTakePieceMode == 2
											? '快递寄回'
											: ''
									}}
								</view>
							</view>
							<view
								class="list-item_lable"
								v-if="detailObj.customerTakePieceMode == 2"
							>
								<view class="list-item_lable_title">收件地址：</view>
								<view class="cont">
									{{ detailObj.customerReceiveUsername }}
									{{ detailObj.customerReceivePhone }}
									{{
										[
											detailObj.customerReceiveProvince,
											detailObj.customerReceiveCity,
											detailObj.customerReceiveArea,
											detailObj.customerReceiveAddress,
										]
											.filter((o) => o)
											.join('')
									}}
								</view>
							</view>
							<view class="list-item_lable" v-if="detailObj.status == 6">
								<view class="list-item_lable_title">收货物流：</view>
								<view class="cont">
									{{ detailObj.sendOutLogisticsName }}
								</view>
							</view>
							<view class="list-item_lable" v-if="detailObj.status == 6">
								<view class="list-item_lable_title">收货单号：</view>
								<view class="cont">
									{{ detailObj.sendOutLogisticsNo }}
								</view>
							</view>
							<view class="list-item_lable">
								<view class="list-item_lable_title">最新进度：</view>
								<view class="cont">
									{{ detailObj.lastProgress }}
								</view>
							</view>
						</view>
						<view class="list-item" v-if="finishOrderTemplates.length > 0">
							<view class="edit_order_check">
								<uni-section
									titleColor="#000"
									title="其他信息"
									titleFontSize="28rpx"
									type="line"
								></uni-section>
							</view>
							<view class="list-item_finish_order">
								<view
									v-for="(item, index) in finishOrderTemplates"
									:key="index"
								>
									<view class="list-item_lable">
										<view class="list-item_lable_title">{{ item.name }}：</view>
										<view
											class="cont"
											v-if="
												item.type == 1 ||
												item.type == 2 ||
												item.type == 3 ||
												item.type == 4 ||
												item.type == 9 ||
												item.type == 10
											"
										>
											<TextLength
												:num="50"
												:text="item.val.filter((o) => o).join('、') || ''"
											></TextLength>
										</view>
										<view class="cont" v-if="item.type == 5">
											<image
												:src="img"
												mode="aspectFill"
												class="cont_img"
												v-for="(img, index) in item.val.filter((o) => o)"
												:key="index"
												@click="
													lookImg(
														item.val.filter((o) => o),
														index,
													)
												"
											></image>
										</view>
										<view class="cont" v-if="item.type == 6">
											<view
												class="pdf_sty"
												v-for="(url, index) in item.val.filter((o) => o)"
												:key="index"
												@click="lookPDF(url)"
											>
												PDF
											</view>
										</view>
										<view class="cont" v-if="item.type == 7">
											<video
												:src="url"
												mode="aspectFill"
												class="cont_img"
												v-for="(url, index) in item.val.filter((o) => o)"
												@click="videoUrlShow(url)"
												:key="index"
												:controls="false"
												:enable-progress-gesture="false"
												:show-center-play-btn="false"
											></video>
										</view>
										<!-- 评分8 -->
										<view class="cont" v-if="item.type === 8">
											<uni-rate
												:readonly="true"
												:value="Number(item.val.map((o) => o).join()) / 2"
												margin="10"
											/>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view
				:refresher-triggered="triggered"
				refresher-background="transparent"
				@refresherrefresh="onRefresh"
				@refresherpulling="refresherpulling"
				refresher-enabled="true"
				scroll-y="true"
				class="scroll-view_list"
				@scrolltolower="scrolltolower"
				v-if="currentTab == 1"
			>
				<view class="factory_main_bgBox">
					<view class="goods_info">
						<view
							v-for="(item, index) in goodsDetail"
							:key="index"
							class="goods_info_item_li"
						>
							<view class="goods_info_conent">
								<view class="left_img">
									<image
										v-if="item.goodsImage"
										@click="lookImg([item.goodsImage], 0)"
										class="img"
										lazy-load
										:src="item.goodsImage"
										mode="aspectFill"
									></image>
									<uni-icons
										color="#aae"
										size="48"
										v-else
										type="image"
									></uni-icons>
								</view>
								<view class="right_text">
									<view class="brands">
										{{ item.goodsName }}
									</view>
									<view class="pt">
										<span class="tip">编号：</span>
										<view class="lis">
											{{ item.goodsCode }}
										</view>
									</view>
									<!-- <view class="pt">
										<span class="tip">规格：</span>
										<view class="lis">
											{{item.goodsSpecName}}
										</view>
									</view> -->
									<!-- <view class="pt">
										<span class="tip">型号：</span>
										<view class="lis">
											{{item.goodsModel}}
										</view>
									</view> -->
									<!-- <view class="pt">
										<span class="tip">数量：</span>
										<view class="lis">
											{{item.qty}}
										</view>
									</view> -->
									<view class="pt">
										<span class="tip">序列号：</span>
										<view class="lis_code" v-if="item.snCode">
											{{ item.snCode }}
										</view>
									</view>
									<view class="pt">
										<span class="tip">故障描述：</span>
										<view class="lis">
											<TextLength
												:num="50"
												:text="item.descr || '-'"
											></TextLength>
										</view>
									</view>
									<view class="pt">
										<span class="tip">图片：</span>
										<view
											class="lis"
											style="display: flex; flex-wrap: wrap; gap: 12rpx"
										>
											<image
												:src="img"
												mode="aspectFill"
												class="cont_img"
												v-for="(img, index) in item.paths"
												:key="index"
												@click="lookImg(item.paths, index)"
											></image>
										</view>
									</view>
									<view class="pt">
										<span class="tip">视频：</span>
										<view
											class="lis"
											style="display: flex; flex-wrap: wrap; gap: 12rpx"
										>
											<video
												class="cont_video"
												v-for="(video, videoIndex) in item.videoPaths"
												:key="videoIndex"
												:src="video"
												:controls="false"
												:show-center-play-btn="false"
												@click="handleVideoPreview(index)"
											></video>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view
				:refresher-triggered="triggered"
				refresher-background="transparent"
				@refresherrefresh="onRefresh"
				@refresherpulling="refresherpulling"
				refresher-enabled="true"
				scroll-y="true"
				class="scroll-view_list"
				@scrolltolower="scrolltolower"
				v-if="currentTab == 2"
			>
				<view class="factory_main_bgBox">
					<view class="log_list_box">
						<view class="log_list">
							<view
								class="log_item"
								v-for="(item, index) in logObjList.rows"
								:key="index"
							>
								<uni-icons
									type="smallcircle"
									class="icon_item"
									size="20"
									:color="index == 0 ? '#007cff' : '#EAECEE'"
								></uni-icons>
								<view class="block_item">
									<view class="title_span">
										<p
											class="content_time"
											:style="{color: index == 0 ? '#000' : '#999'}"
										>
											{{ item.createTime }}
										</p>
										<p
											class="title"
											:style="{color: index == 0 ? '#007cff' : '#999'}"
										>
											{{ '【' + item.createEmpType + '】' + item.createEmp
											}}{{ item.event }}
										</p>
										<view
											class="content_text"
											:style="{color: index == 0 ? '#000' : '#999'}"
										>
											{{ item.content }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 填写物流 -->
		<view
			v-if="currentTab == 0 && detailObj?.writeCallbackFactoryLogistics"
			class="footer_order"
		>
			<view class="footer_order_right" @click="onFillLogisticsClick">
				<view class="btn">填写物流</view>
			</view>
		</view>

		<view
			class="sign-for-btn"
			@click="onSignFor"
			v-if="detailObj && detailObj.status == 6"
		>
			签收
		</view>

		<uni-popup
			ref="popupvideoRef"
			background-color="#fff"
			@change="urlClickShow"
		>
			<video
				:src="videoUrl"
				:enable-progress-gesture="false"
				:show-center-play-btn="false"
			></video>
		</uni-popup>

		<!-- 填写物流 -->
		<uni-popup ref="fillLogisticsPopup" type="bottom" background-color="#fff">
			<view class="popup_way_">
				<view class="text_top_popup">
					填写物流
					<uni-icons
						class="icon"
						color="#aaa"
						@click="hideFillLogisticsPopup"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<uni-forms
					ref="expressForm"
					:rules="expressRules"
					:modelValue="expressFormData"
					label-width="80"
					err-show-type="toast"
				>
					<view class="uni_form">
						<view class="left_right_form">
							<uni-forms-item label="物流名称" name="express">
								<!-- <view class="select-express" @click="selectExpressRef.open">
									{{
										expressFormData.express
											? expressFormData.express
											: '点击选择物流'
									}}
								</view> -->
								<uni-easyinput
									v-model="expressFormData.express"
									placeholderStyle="font-size:28rpx;"
									placeholder="请输入物流名称"
								/>
							</uni-forms-item>
							<uni-forms-item label="物流单号" name="expressId">
								<uni-easyinput
									v-model="expressFormData.expressId"
									placeholderStyle="font-size:28rpx;"
									placeholder="请输入物流单号"
								/>
							</uni-forms-item>
						</view>
					</view>
				</uni-forms>
				<view class="address_btn">
					<view class="btn_addres">
						<button type="primary" class="btn font-28rpx" @click="onLogisticsSubmit">
							确定提交
						</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 选择物流 -->
		<uni-popup ref="selectExpressRef" :safe-area="false" type="bottom">
			<view class="popup_main">
				<view class="lable_top">
					选择物流
					<uni-icons
						class="icon"
						color="#aaa"
						@click="selectExpressRef && selectExpressRef.close()"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar
						:focus="false"
						class="search_card_bar"
						@confirm="getLogisticsSelectList()"
						placeholder="请输入客户名称或手机号查询"
						radius="100"
						bg-color="rgba(242, 243, 245, 1)"
						cancelButton="none"
						v-model="logisticsForm.name"
					></uni-search-bar>
					<view class="search_btn" @click="onSearchLogistics">搜索</view>
				</view>
				<view
					class="logistics-item"
					v-for="(item, index) in logisticsList"
					:key="index"
					@click="onSelectLogistics(item.name)"
				>
					{{ item.name }}
				</view>
				<view
					v-if="logisticsList.length == 0"
					style="
						display: flex;
						justify-content: center;
						align-items: center;
						color: #999;
						font-size: 24rpx;
						height: 30%;
					"
				>
					查询无数据...
					<uni-icons type="search" color="#999"></uni-icons>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="videoPreviewPopup" type="center">
			<video :src="videoPreviewUrl"></video>
		</uni-popup>

		<uni-popup ref="signForPopup" type="center">
			<view class="sign-for-popup-container">
				<view class="header">
					<view class="placeholder">
						<uni-icons type="closeempty"></uni-icons>
					</view>
					<view class="title">提示</view>
					<view class="close-btn" @click="onCancelSignFor">
						<uni-icons type="closeempty"></uni-icons>
					</view>
				</view>
				<view class="content">确定签收吗？</view>
				<view class="footer">
					<view class="confirm-btn" @click="onConfirmSignFor">确定</view>
					<view class="divider"></view>
					<view class="cancel-btn" @click="onCancelSignFor">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted, reactive, watch, nextTick} from 'vue';
	import _ from 'lodash';
	import {onUnload, onShow, onLoad, onHide} from '@dcloudio/uni-app';
	import TextLength from '@/components/TextLength.vue';
	import return_fac_api from '@/util/network_api/return_fac_api.js';

	// 视频预览地址
	const videoPreviewUrl = ref('');

	// 视频预览弹窗组件实例
	const videoPreviewPopup = ref();

	// 签收弹窗组件实例
	const signForPopup = ref();

	/**
	 * 视频预览事件
	 * @params {Number} index - 商品索引
	 */
	const handleVideoPreview = (index: number) => {
		if (goodsDetail.value[index].videoPaths[0] && videoPreviewPopup.value) {
			videoPreviewUrl.value = goodsDetail.value[index].videoPaths[0];
			videoPreviewPopup.value.open();
		}
	};

	/**
	 * 签收点击触发
	 */
	const onSignFor = () => {
		if (signForPopup.value) {
			signForPopup.value.open();
		}
	};

	/**
	 * 确定签收
	 */
	const onConfirmSignFor = async () => {
		if (workId.value) {
			uni.showLoading({
				mask: true,
				title: '加载中',
			});
			const res = await return_fac_api.confirmSignFor(workId.value);
			if (res.code === 20000) {
				uni.showToast({
					mask: true,
					title: '签收成功',
				});
				onCancelSignFor();
				getUserRepairField(workId.value);
				getUserRepairDetail(workId.value);
				return;
			}
			uni.showToast({
				mask: true,
				title: res.message,
			});
			uni.hideLoading();
		}
	};

	/**
	 * 取消签收
	 */
	const onCancelSignFor = () => {
		if (signForPopup.value) {
			signForPopup.value.close();
		}
	};

	// ----------- 物流相关 -----------
	const selectExpressRef = ref();
	const fillLogisticsPopup = ref();

	/**
	 * 填写物流点击时触发
	 */
	const onFillLogisticsClick = () => {
		if (fillLogisticsPopup.value) {
			fillLogisticsPopup.value.open();
		}
	};

	/**
	 * 关闭填写物流
	 */
	const hideFillLogisticsPopup = () => {
		if (fillLogisticsPopup.value) {
			fillLogisticsPopup.value.close();
		}
	};

	// 物流数据
	const expressForm = ref();
	const expressRules = {
		expressId: {rules: [{required: true, errorMessage: ' '}]},
	};
	const expressFormData = reactive({
		express: '',
		expressId: '',
	});

	/**
	 * 物流确定点击时触发
	 */
	const onLogisticsSubmit = _.debounce(
		async () => {
			try {
				uni.showLoading({title: '加载中', icon: 'none', mask: true});
				const data = {
					sendBackLogisticsName: expressFormData.express,
					sendBackLogisticsNo: expressFormData.expressId,
				};
				const {code} = await return_fac_api.saveCallbackFactoryLogistics(
					workId.value,
					data,
				);
				uni.hideLoading();
				if (code === 20000) {
					uni.showToast({icon: 'none', title: '提交成功', mask: true});
					hideFillLogisticsPopup();
					swichMenu(0);
					return;
				}
				uni.showToast({icon: 'none', title: res.message, mask: true});
			} finally {
				uni.hideLoading();
			}
		},
		800,
		{leading: false},
	);
	// 物流列表
	const logisticsList = ref([]);
	// 获取物流列表
	const logisticsForm = reactive({
		limit: 50,
		name: '',
		page: 1,
	});
	const getLogisticsSelectList = async () => {
		try {
			// uni.showLoading({ title: "加载中...", mask: true })
			const {code, data} = await return_fac_api.getLogisticsSelectList(
				logisticsForm,
			);
			if (code == 20000) {
				logisticsList.value.push(...data.rows);
			}
		} finally {
			// uni.hideLoading()
		}
	};
	getLogisticsSelectList();
	// 确认添加物流名称
	const onSelectLogistics = (name) => {
		expressFormData.express = name;
		if (selectExpressRef.value) {
			selectExpressRef.value.close();
		}
	};
	// 搜索
	const onSearchLogistics = () => {
		logisticsForm.page = 1;
		logisticsList.value = [];
		getLogisticsSelectList();
	};

	const workId = ref(null); //工单Id
	const detailObj = ref();
	// 张开显示
	const isShow = ref(true);
	const urlClickShow = (v) => {
		if (!v.show) videoUrl.value = '';
	};
	const goodsDetail = ref([]); //商品详情
	onLoad(async (e) => {
		workId.value = e.id;
		if (!e.id) return;
		swichMenu(0);
	});
	const tabsList = ref([
		{
			status: 1,
			name: '工单信息',
		},
		{
			status: 2,
			name: '商品信息',
		},
		{
			status: 3,
			name: '服务进度',
		},
	]);
	const currentTab = ref(0); //当前标题index
	// Tab切换内容
	async function swichMenu(index) {
		switch (index) {
			case 0:
				getUserRepairField(workId.value);
				getUserRepairDetail(workId.value);
				break;
			case 1:
				getUserRepairGoodsDetail(workId.value);
				break;
			case 2:
				dataVo.value.page = 1;
				getNetworkOrderLastLogObj();
				break;
		}
		currentTab.value = index;
	}
	// 工单进展
	const logObjList = ref({rows: [], total: 0});
	let dataVo = ref({
		limit: 0,
		page: 1,
	});
	const getNetworkOrderLastLogObj = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await return_fac_api
			.getRepairLog(dataVo.value, workId.value)
			.then((res) => {
				if (res.code == 20000) {
					if (dataVo.value.page == 1) {
						logObjList.value = res.data;
					} else {
						logObjList.value.rows = [
							...logObjList.value.rows,
							...res.data.rows,
						];
						logObjList.value.total = res.data.total;
					}
				}
			});
		uni.hideLoading();
	};
	/* 设备信息 */
	const getUserRepairGoodsDetail = async (id) => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await return_fac_api.getUserRepairGoodsDetail(id).then((res) => {
			uni.hideLoading();
			if (res.code == 20000) {
				goodsDetail.value = res.data.rows;
			}
		});
	};
	const scrolltolower = () => {
		if (
			currentTab.value == 1 &&
			logObjList.value.total > logObjList.value.rows.length
		) {
			dataVo.value.page += 1;
			getNetworkOrderLastLogObj();
		}
	};
	// 下拉刷新触发
	const triggered = ref(false);
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return; // 防止上滑页面也触发下拉
		triggered.value = true;
	};
	const onRefresh = _.debounce(
		async () => {
			await swichMenu(currentTab.value);
			setTimeout(() => {
				triggered.value = false;
			}, 500);
		},
		600,
		{leading: false},
	);
	// 获取详情
	const getUserRepairDetail = (id) => {
		uni.showLoading({
			title: '加载中',
			mask: true,
		});
		return_fac_api.getUserRepairDetail(id).then((res) => {
			if (res.success) {
				detailObj.value = res.data.row;
			}
			uni.hideLoading();
		});
	};
	const finishOrderTemplates = ref([]);
	// 获取自定义信息
	const getUserRepairField = (id) => {
		uni.showLoading({
			title: '加载中',
			mask: true,
		});
		return_fac_api.getUserRepairField(id).then((res) => {
			if (res.success) {
				finishOrderTemplates.value = res.data.rows;
			}
			uni.hideLoading();
		});
	};
	// 查看视频
	const popupvideoRef = ref();
	const videoUrl = ref('');
	const videoUrlShow = (url) => {
		videoUrl.value = url;
		popupvideoRef.value.open();
	};
	// 预览图片
	const lookImg = (urls: any, index) => {
		uni.previewImage({
			urls: urls,
			current: index,
			indicator: 'number',
			// 先下载图片
			longPressActions: {
				itemList: ['保存图片'],
				success: function (data) {
					var url = urls[data.index];
					// 先下载图片
					uni.downloadFile({
						url,
						success: (res) => {
							// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({title: '保存成功！', icon: 'none'});
								},
								fail: () => {
									uni.showToast({title: '保存失败', icon: 'none'});
								},
							});
						},
					});
				},
			},
		});
	};
	// 查看附件
	const lookPDF = (url) => {
		uni.openDocument({
			filePath: url,
			fileType: 'pdf',
			success: function (res) {},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err,
				});
			},
		});
	};
	onUnload(() => {
		uni.hideLoading();
	});
</script>

<style lang="scss" scoped>
	.sign-for-popup-container {
		background-color: #fff;
		width: 600rpx;

		.header {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 24rpx 0 24rpx;

			.placeholder {
				opacity: 0;
			}
		}

		.content {
			padding: 24rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.footer {
			display: flex;
			border-top: 2rpx solid #e5e5e5;
			height: 80rpx;

			.confirm-btn,
			.cancel-btn {
				font-size: 28rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.divider {
				width: 2rpx;
				height: 100%;
				background-color: #e5e5e5;
			}

			.confirm-btn {
				color: #007cff;
			}
		}
	}

	.sign-for-btn {
		position: fixed;
		bottom: 32rpx;
		left: 24rpx;
		height: 72rpx;
		right: 24rpx;
		background-color: #007cff;
		border-radius: 48rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}

	.select-express {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		height: 70rpx;
		border-bottom: 2rpx solid rgb(229, 229, 229);
		// color: #999;
	}

	.popup_main {
		.logistics-item {
			padding: 30rpx 30rpx;
			border-bottom: 2rpx solid #eee;
		}

		background-color: #fafafa;
		height: 1200rpx;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;

		.search_card {
			display: flex;
			align-items: center;
			margin: 0 24rpx;

			&_bar {
				flex: 1;
			}

			.search_btn {
				font-size: 28rpx;
				color: #007cff;
				font-weight: bold;
			}
		}

		.add_address {
			display: flex;
			justify-content: flex-end;
			color: #007cff;
			cursor: pointer;
			padding: 0 24rpx 24rpx;
			font-size: 28rpx;
		}

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			height: 100rpx;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.sele_ul {
			overflow: auto;
			// height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			row-gap: 24rpx;

			.sele_li {
				background-color: #fff;
				margin: 0 30rpx;
				border-radius: 4rpx;
				padding: 24rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:last-child {
					margin-bottom: 300rpx;
				}

				.sele_li_item {
					display: flex;
					align-items: center;
					flex: 1;

					.add_ed {
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-left: 14rpx;
						row-gap: 6rpx;

						.user_xx {
							font-size: 28rpx;
							display: flex;
							align-items: center;
							// margin-bottom: 12rpx;

							.user_name {
								font-size: 28rpx;
							}

							.tip {
								border: 1rpx solid #00c0c0;
								margin-left: 30rpx;
								border-radius: 4rpx;
								padding: 2rpx 6rpx;
								color: #00c0c0;
								font-size: 22rpx;
							}
						}

						.text {
							font-size: 28rpx;
							color: #000;
							width: 100%;
							white-space: pre-wrap;
							// margin-top: 12rpx;
						}
					}
				}
			}
		}

		.add_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 3;
			background-color: #fff;
			padding: 30rpx 0;

			.btn {
				flex: 1;
				margin: 0 80rpx;
				background-color: #007cff;
				color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				border-radius: 40rpx;
			}
		}
	}

	// 物流弹窗
	.popup_way_ {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		// height: 1100rpx;
		padding: 24rpx;
		box-sizing: border-box;

		.text_top_popup {
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx 0;
			font-weight: bold;

			.icon {
				position: absolute;
				right: 40rpx;
				font-weight: 500;
			}
		}

		.tip_title {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			height: 50%;
		}

		:deep(.uni-forms-item__label) {
			font-size: 28rpx;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 28rpx;
		}

		.uni_form {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 10rpx 24rpx;

			:deep(.btn_input) {
				display: flex;
				align-items: center;
				height: 35px;
				border-bottom: solid 1px #eee;
				width: 100%;

				.uniui-bottom::before {
					color: #999;
					font-size: 14px;
				}

				.icon {
					top: -20%;
				}
			}

			:deep(.uni-forms-item) {
				margin-bottom: 26rpx;

				.uni-forms-item__label {
					padding-bottom: 0;
				}

				.uni-forms-item__error {
					left: auto;
					right: 0;
					padding-top: 2rpx;
				}
			}

			:deep(.left_right_form) {
				.uni-forms-item {
					margin-bottom: 26rpx;

					&.is-direction-top {
						flex-direction: row;
					}

					.uni-forms-item__label {
						padding-bottom: 0;
					}

					.uni-forms-item__error {
						left: auto;
						right: 0;
						padding-top: 2rpx;
					}
				}
			}

			:deep(.is-input-border) {
				border: none;
				border-bottom: 1rpx solid transparent;
				border-radius: 0;

				&.is-focused {
					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

			.message {
				border: solid 1px #eee;

				width: 100%;

				:deep(textarea) {
					font-size: 28rpx;
					// width: 600rpx;
					flex: 1;
					min-height: 100rpx;
					padding: 10rpx 14rpx 0;
					max-height: 200rpx;
					overflow: auto;
				}
			}
		}

		.address_btn {
			// position: fixed;
			// bottom: 0rpx;
			// right: 0;
			// left: 0;
			// z-index: 6;
			background-color: #fff;
			border-top: 1rpx solid #eee;

			.btn_addres {
				padding: 30rpx 0 40rpx;

				:deep(button:after) {
					border: none !important;
				}

				.btn {
					border-radius: 50rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #007cff;
					margin: 0 48rpx;
				}
			}
		}
	}

	// 填写物流
	.footer_order {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		z-index: 9;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 48rpx 48rpx 60rpx;
		box-sizing: border-box;
		border-top: 1px solid #eee;

		&_left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			margin-right: 24rpx;

			.gray_tip {
				color: #007cff;
			}
		}

		&_right {
			flex: 1;
			border-radius: 45rpx;
			height: 80rpx;
			background-color: #007cff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.factory_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.body-view {
			box-sizing: border-box;
			padding-top: 86rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
			height: 100%;
		}

		.top-menu-view {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			background-color: #ffffff;
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: 1rpx solid #d8dbe6;
			position: fixed;
			z-index: 2;

			.menu-topic-view {
				display: inline-block;
				height: 86rpx;
				position: relative;

				.menu-topic-text {
					font-size: 28rpx;
					color: #000;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					margin: 0 20rpx;
					position: relative;
					z-index: 2;
					font-weight: 700;
				}

				.menu-topic-bottom {
					position: absolute;
					bottom: 4rpx;
					left: 0;
					right: 0;
					margin: 0 20rpx;

					.menu-topic-bottom-color {
						width: 100%;
						height: 4rpx;
					}
				}

				.menu-topic,
				.menu-topic-act {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.menu-topic-act {
					.menu-topic-text {
						font-weight: 700;
						color: #007cff;
						display: flex;
						justify-content: center;
					}

					.menu-topic-bottom {
						display: flex;
						justify-content: center;
					}

					.menu-topic-bottom-color {
						background: #007cff;
					}
				}
			}
		}

		.scroll-view_list {
			height: 100%;
			box-sizing: border-box;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}
		}

		&_bgBox {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin: 0 24rpx;
			padding-bottom: 180rpx;
			box-sizing: border-box;

			.goods_info {
				box-sizing: border-box;
				background-color: #fafafa;
				display: flex;
				flex-direction: column;
				row-gap: 24rpx;
				border-radius: 8rpx;
				margin: 24rpx 0;

				.goods_info_item_li {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					position: relative;
					padding: 24rpx 8rpx 24rpx 24rpx;
					background-color: #fff;
					// margin: 24rpx 0;

					.goods_info_conent {
						display: flex;
						// align-items: center;
						width: 100%;
						flex: 1;

						.left_img {
							width: 180rpx;
							height: 180rpx;
							box-shadow: 0 0 2rpx 2rpx #eee;
							border-radius: 4rpx;
							margin: 0 20rpx 0 0;

							.img {
								width: 100%;
								height: 100%;
								border-radius: 4rpx;
							}
						}

						.right_text {
							font-size: 24rpx;
							// margin-right: 20rpx;
							flex: 1;
							position: relative;
							display: flex;
							flex-direction: column;
							row-gap: 6rpx;

							.brands {
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.pt {
								display: flex;
								// align-items: center;
								width: 100%;
								justify-content: flex-start;

								.num_b {
									display: flex;
									align-items: center;
									column-gap: 6rpx;

									&_qty {
										background-color: #f53f3f;
										color: #fff;
										border-radius: 6rpx;
										padding: 0 6rpx;
										font-size: 22rpx;
									}
								}

								.tip {
									color: #777;
								}

								.lis {
									display: -webkit-box;
									// -webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
									flex: 1;

									.cont_img {
										width: 80rpx;
										height: 80rpx;
										box-shadow: 0 0 2rpx 2rpx #e8e8e8;
									}

									.cont_video {
										width: 100rpx;
										height: 100rpx;
										box-shadow: 0 0 2rpx 2rpx #e8e8e8;
									}
								}

								.lis_code {
									color: #007cff;
									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
									font-size: 24rpx;
									flex: 1;
									display: flex;
									align-items: center;
								}
							}

							.look_some {
								text-align: center;
							}
						}
					}
				}
			}

			.item_detail {
				display: flex;
				flex-direction: column;
				row-gap: 12rpx;
				padding: 24rpx 0;
				background-color: #fff;
				margin: 24rpx 0;

				&_tableHead_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.status {
						font-size: 22rpx;
						background-color: #f2f9ff;
						color: #007cff;
						padding: 8rpx 12rpx;
						border-radius: 4rpx;
					}

					.status_123 {
						color: #e6a23c;
						background-color: #fdf6ec;
					}

					.status_4 {
						color: #00c0c0;
						background-color: #f2ffff;
					}

					.status_6 {
						color: #909399;
						background-color: #f4f4f5;
					}
				}

				&_tableHead {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;
					column-gap: 12rpx;

					&_tip {
						background-color: #007cff;
						color: #fff;
						padding: 8rpx 12rpx;
						font-size: 22rpx;
						border-radius: 6rpx;
						font-weight: normal;
					}

					&_content {
						display: flex;
						flex-direction: column;
						row-gap: 6rpx;

						padding: 0 20rpx;

						&_info {
							display: flex;
							align-items: center;
							column-gap: 12rpx;
							font-size: 26rpx;
						}
					}
				}

				:deep(.uni-section) {
					.uni-section-header {
						padding: 0;
					}
				}

				.list-item {
					font-size: 26rpx;
					position: relative;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					row-gap: 12rpx;
					padding: 12rpx 24rpx;

					.divider {
						border-bottom: 2rpx dotted #e5e5e5;
					}

					.edit_order_check {
						display: flex;
						column-gap: 20rpx;
						align-items: center;
						justify-content: space-between;
					}

					&_info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #ffffff;
						margin: 24rpx;
						padding: 24rpx;
						font-size: 28rpx;
						border-radius: 4rpx;

						&_left {
							flex-grow: 2;
							font-size: 28rpx;
							flex: 1;

							&_name_phone {
								display: flex;
								margin-bottom: 12rpx;

								.name {
									margin-right: 20rpx;
									font-weight: bold;
								}
							}

							.call_status {
								display: flex;
								align-items: center;
								line-height: 28rpx;
								font-size: 28rpx;
								transform: scale(0.8);
							}

							.address {
								// font-weight: bold;
								// color: #999;
								width: 100%;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: pre-wrap;
							}
						}

						&_right {
							display: flex;
							justify-content: space-between;
							flex-direction: column;
							align-items: center;
							font-size: 24rpx;

							.call_status {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								width: 100%;
							}

							&_btn {
								display: flex;
								justify-content: space-between;
								width: 100%;
								margin-top: 12rpx;

								.bg_btn {
									background-color: #007cff20;
									border-radius: 50%;
									padding: 6rpx;
									margin-left: 22rpx;
								}
							}
						}
					}

					&_title {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						// font-weight: bold;
						flex-wrap: wrap;
						margin-bottom: 12rpx;

						.module {
							color: #00c0c0;
							font-size: 24rpx;
							margin-left: 12rpx;
						}
					}

					.list-item_finish_order {
						display: flex;
						flex-direction: column;
						row-gap: 14rpx;
					}

					&_lable {
						display: flex;
						align-items: flex-start;
						flex-wrap: wrap;
						// justify-content: space-between;
						color: #777;
						// margin-bottom: 12rpx;
						margin-left: 20rpx;

						&_title {
							display: flex;
							align-items: center;
							// width: 196rpx;
							justify-content: flex-end;
						}

						.cont {
							color: #000;
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							flex: 1;
							gap: 14rpx;
							word-wrap: break-word;
							word-break: break-all;

							.pdf_sty {
								background-color: rgb(250, 81, 81);
								width: 80rpx;
								height: 80rpx;
								color: #fff;
								text-align: center;
								font-size: 22rpx;
								position: relative;
								display: flex;
								align-items: center;
								justify-content: center;

								&:before {
									content: '';
									position: absolute;
									z-index: 2;
									border: 12rpx solid #0000002b;
									right: 0rpx;
									top: 0rpx;
									border-top: 12rpx solid #fff;
									border-right: 12rpx solid #fff;
								}
							}

							.level {
								margin-left: 12rpx;
								font-size: 24rpx;
							}

							.cont_img {
								width: 80rpx;
								height: 80rpx;
								// margin: 0 8rpx 16rpx;
								box-shadow: 0 0 2rpx 2rpx #e8e8e8;
							}
						}
					}

					&_top {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						.more {
							color: #007cff;
							display: flex;
							align-items: center;
							font-size: 28rpx;
						}

						&_right {
							display: flex;
							align-items: center;
							font-size: 24rpx;

							.tip {
								color: rgba(245, 108, 108, 1);
								margin-right: 10rpx;
							}

							._tag {
								font-size: 22rpx;
								border-radius: 25rpx 0 0 25rpx;
								color: #ffffff;
								padding: 8rpx 16rpx;
								position: relative;
								right: -17rpx;
								// right: -5rpx;

								&::after {
									content: '';
									position: absolute;
									right: -5rpx;
									bottom: -5rpx;
									border: 5rpx solid transparent;
									border-left-width: 5rpx;
									border-left-color: var(--item-color);
								}
							}
						}
					}

					.log_item {
						position: relative;
						// border-left: 4rpx dashed #EAECEE;
						margin: 24rpx;

						// &:last-child {
						// 	border-left: 4rpx dashed transparent;
						// }

						.icon_item {
							position: absolute;
							left: -22rpx;
							top: -5rpx;
						}

						.block_item {
							padding: 0 0 0rpx 24rpx;

							.title_span {
								.title {
									display: flex;
									align-items: center;
									flex-wrap: wrap;
									font-size: 28rpx;
									color: #007cff;
								}

								.content_text {
									display: flex;
									align-items: center;
									flex-wrap: wrap;
									font-size: 24rpx;
									text-indent: 0.5em;
									margin-top: 12rpx;
								}

								.content_time {
									font-size: 24rpx;
									text-indent: 0.5em;
									margin: 0rpx 0 12rpx;
									color: #777;
								}
							}
						}
					}
				}

				.item_content {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					font-size: 27rpx;
					width: 100%;

					.lable_tip {
						color: #777;
					}

					.content_name {
						flex: 1;
						text-align: right;
						margin-left: 32rpx;
						word-wrap: break-word;
						word-break: break-all;
					}
				}

				.order_sele_info {
					&_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;

						.order_info_item {
							display: flex;
							flex-direction: column;
							// justify-content: space-evenly;
							padding: 24rpx 0 24rpx;
							gap: 20rpx;

							.content_info {
								display: flex;

								.label {
									// width: 196rpx;
									// text-align: right;
									color: #777;
								}

								.value {
									// width: 240rpx;
									word-wrap: break-word;
									word-break: break-all;
									flex: 1;
								}
							}
						}
					}

					.order_sele_info_item ~ .order_sele_info_item {
						border-top: 2rpx solid #eee;
					}
				}
			}

			.log_list_box {
				margin: 24rpx 0;

				.log_list {
					padding: 24rpx 24rpx;
					background-color: #fff;
					filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
					border-radius: 4rpx;

					.log_item {
						position: relative;
						border-left: 4rpx dashed #eaecee;

						&:last-child {
							border-left: 4rpx dashed transparent;
						}

						.icon_item {
							position: absolute;
							left: -20rpx;
							top: -5rpx;
							z-index: 9;
						}

						.block_item {
							padding: 0 0 30rpx 24rpx;

							.title_span {
								.title {
									display: flex;
									align-items: center;
									flex-wrap: wrap;
									font-size: 28rpx;
									color: #007cff;
								}

								.content_text {
									display: flex;
									align-items: center;
									flex-wrap: wrap;
									font-size: 24rpx;
									text-indent: 0.5em;
									margin-top: 12rpx;
								}

								.content_time {
									font-size: 24rpx;
									text-indent: 0.5em;
									margin: 0rpx 0 12rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
